<template>
  <div>你好</div>
  <el-input type="text" v-model="keyword" @input="sendCancel" />
  <el-button type="primary" @click="getTimeOut">测试超时</el-button>
</template>

<script setup lang="ts">
import { request } from '@/utils/request';
import { ref } from 'vue';

const keyword = ref("")

function getTimeOut() {
  request("/api/test", 'GET')
}
let controller: AbortController | null = null;
let id: NodeJS.Timeout | number = -1;

// 节流
// 取消上一次的请求
function sendCancel() {
  clearTimeout(id)
  id = setTimeout(() => {
    if (controller == null) {
      controller = new AbortController()
    } else {
      controller.abort()
      controller = new AbortController()

    }
    request("/api/test", "GET", {}, controller.signal).then(res => {
      console.log(res.data);
    })
  }, 1000);

}

</script>

<style></style>